/**
*** least.
*** Author: Kamil Czujowski, Sergej Müller
*** Version: 1.5
*** Made with ♥ - Copyright (c) 2013 Hamburg, Germany - All rights reserved.
*** https://twitter.com/kamilczujowski, http://wpcoder.de
**/

@import url(http://fonts.googleapis.com/css?family=Arvo);

/* @group Mixins */
@mixin Georgia($size, $height, $weight: normal) {
    font-family: Georgia, Arial, sans-serif;
    font-size: $size;
    line-height: $height;
    font-weight: $weight;
}
@mixin Arvo($size, $height, $weight: normal) {
    font-family: Arvo, Arial, sans-serif;
    font-size: $size;
    line-height: $height;
    font-weight: $weight;
}

@mixin Helvetica($size, $height, $weight: normal) {
    font-family: Helvetica, Arial, sans-serif;
    font-size: $size;
    line-height: $height;
    font-weight: $weight;
}
@mixin Courier($size, $height, $weight: normal) {
    font-family: Courier, Arial, sans-serif;
    font-size: $size;
    line-height: $height;
    font-weight: $weight;
}

@mixin transition ($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
}

@mixin rotate($arguments) {
    -webkit-transform: $arguments;
    -moz-transform: $arguments;
    -ms-transform: $arguments;
    -o-transform: $arguments;
    transform: $arguments;
}
/* @end */

/* @group Colors */
$black: #000;
$white: #fff;
$red: #e94439;
$codeBlue: #53a0cd;
$whiteLight: #fafafa;

$borderWhite: #FFF;
$borderBlack: #333;
/* @end */

/* @group Default */
* {
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
}

ul {
    list-style: none;
}

h2 {
    @include Arvo(30px, 25px, 500);
    text-transform: uppercase;
    color: $white;
    letter-spacing: 1px;
}

p {
    @include Georgia(15px, 15px, 100);
    color: $white;
}
/* @end */

/* @group Gallery */
section {
    min-width:100%;
    width: 100%;
    min-height:100%;
    text-align: center;
    padding: 30px 0;
    margin-bottom: 30px;
    
    background-color: $borderBlack;
    box-shadow: 0 0 10px;
    
    /* @group Fullimage */
    #fullPreview {
        background-color: $borderBlack;
        border-top: 2px solid $borderBlack;
        border-bottom: 2px solid $borderBlack;
        padding: 50px 0 30px 0;
        
        display: none;
        
        img,
        .fullCaption {
            max-width:960px;
            width:100%;
            margin:0 auto;
            display:block;
        }
        
        .fullCaption {
            @include Helvetica(13px, 15px, 300);
            color: $white;
            margin: 15px auto 0 auto;
        }
        
        figure {
            background-image: url('../img/effects/close.png');
            background-size: 100%;
            
            width: 30px;
            height: 30px;
            
            position: absolute;
            top: 10px;
            right: 20px;
            
            cursor: pointer;
        }
    }
    
    /* @end */
    
    /* @group Smallimages */
    li {
        display: inline-block;
        vertical-align: top;
        position: relative;
        
            &:hover .overLayer {
                @include transition(opacity, 0.3s, linear);

                opacity: 0.6;
                display: block;
                background: lighten($black, 50%);
            }
            
            &:hover .infoLayer {
                @include transition(opacity, 0.3s, linear);

                opacity: 1;
                display: block;
            }
        
        a {
            display: block;
            width: 240px;
            height: 150px;
            position: absolute;
            top: 10px;
            left: 0;
            z-index: 6;

            &.spinner {
                background-size: 100%;
                background-image: url('../img/effects/spinner.gif');

                width: 50px;
                height: 50px;

                position: absolute;
                left: 95px;
                top: 60px;
            }
        }
        
        img {
            border: none;
            margin: 10px 10px 0 0;
        }
        
        /* @group Over */
        .overLayer,
        .infoLayer {
            @include transition(opacity, 0.3s, linear);

            width: 240px;
            height: 150px;
            position: absolute;
            text-align: center;
            opacity: 0;
            top: 10px;
            left: 0;
            z-index: 4;
            
            ul {
                padding: 50px 0 0 0;
                    
                li {
                    display:block;
                    margin: 0 auto;
                    width: 200px;
                    padding: 0 0 5px 0;
                        
                    &:first-child {
                        border-bottom: 2px $borderWhite solid;
                    }
                    
                    &:last-child {
                        padding: 5px 0 0 0;
                        text-transform: lowercase;
                    }
                    
                    h2 {
                        font-size: 25px;
                    }
                }
            }
        /* @end */  
        }
        /* @group Description */
        .projectInfo {
            display: none;
        }
        /* @end *
    /* @end */
    }
} 
/* end */